<template>
  <li class="type1" style="height: 216px;" :class="{'nth2': (idx + 1) % 4 == 0}" @mouseover="f1" @mouseout="f2">
    <a :href="obj.wangzhi" target="_blank" :title="obj.mingcheng">
      <div class="cbox">
        <div class="pic picSphere">
          <img :src="obj.logo" onerror="this.src='/images/default.jpg'" style="margin-top: 0px;">
        </div>
        <div class="text clearfix " style="">
          <div class="infor">
            <p class="p1" style="width:100%" v-html="obj.mingcheng">{{ obj.mingcheng }}</p>
          </div>
        </div>
      </div>
    </a>
  </li>
</template>
<script>
import { substr } from '@/utils/utils'

export default {
  props: {
    obj: {
      type: Object,
      default: null
    },
    idx: {
      type: Number,
      default: -1
    }
  },
  methods: {
    f1(event) {
      const parent = event.currentTarget
      // parent.querySelectorAll('.pic')[0].style.height = '100%'
      parent.querySelectorAll('.pic')[0].style.transform = 'scale(1.4)'
      parent.querySelectorAll('.cbox')[0].style.border = '1px solid #dfdfdf'
      parent.querySelectorAll('.cbox')[0].style.borderRadius = '8px'
      // parent.querySelectorAll('img')[0].style.marginTop = '20px'
      parent.querySelectorAll('.text')[0].style.display = 'none'
    },
    f2(event) {
      const parent = event.currentTarget
      parent.querySelectorAll('.pic')[0].removeAttribute('style')
      parent.querySelectorAll('.cbox')[0].removeAttribute('style')
      // parent.querySelectorAll('img')[0].style.marginTop = 0
      parent.querySelectorAll('.text')[0].style.display = 'block'
    },
    sub(str) {
      return substr(str, 100)
    }
  }
}
</script>
